<template>
  <el-drawer
    title="新增"
    :visible.sync="drawer"
    direction="rtl"
    :before-close="close"
    size="600px"
  >
    <div class="bock" v-loading="loading">
      <el-form
        ref="Form"
        :model="form_data"
        size="mini"
        label-position="right"
        label-width="100px"
        :rules="rules"
      >
        <el-col :span="24">
          <el-form-item label="账户名" prop="user">
            <el-input
              v-model="form_data.user"
              placeholder="请输入账户名"
              maxlength="60"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="人员类型" prop="rylx">
            <el-select v-model="form_data.rylx" placeholder="请选择人员类型">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item, index) in rylxArr"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="姓名" prop="name">
            <el-input
              v-model="form_data.name"
              placeholder="请输入姓名"
              axlength="60"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="身份证号" prop="idNumber">
            <el-input
              v-model="form_data.idNumber"
              placeholder="请输入身份证号"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="初始密码" prop="pass">
            <el-input
              v-model="form_data.pass"
              placeholder="请输入初始密码"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="手机号码" prop="phone">
            <el-input
              v-model="form_data.phone"
              placeholder="请输入手机号码"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col
          :span="24"
          v-if="form_data.rylx == '1' || form_data.rylx == '2'"
        >
          <el-form-item label="所属单位" prop="ssdw">
            <el-select v-model="form_data.ssdw" placeholder="请选择所属单位">
              <el-option label="是" value="7"></el-option>
              <el-option label="否" value="8"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          :span="24"
          v-if="form_data.rylx == '1' || form_data.rylx == '2'"
        >
          <el-form-item label="居住地址" prop="address">
            <el-cascader
              v-model="form_data.address"
              :options="addressArr"
              ref="address"
              placeholder="请选择居住地址"
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col
          :span="24"
          v-if="form_data.rylx == '1' || form_data.rylx == '2'"
        >
          <el-form-item label="详细地址" prop="detailedAddress">
            <el-input
              v-model="form_data.detailedAddress"
              placeholder="请输入详细地址"
              type="textarea"
              axlength="256"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="身份证" prop="imgUrl">
            <Upload
              :limit="2"
              :lableName="'authorizationLetter'"
              @upload="receiveFile"
              :imgUrl="form_data.imgUrl"
              :listType="'picture-card'"
            />
          </el-form-item>
        </el-col>
      </el-form>
    </div>
    <div class="drawerBtn">
      <el-button size="mini" @click="close">取 消</el-button>
      <el-button size="mini" type="primary" @click="submit">确 认</el-button>
    </div>
  </el-drawer>
</template>

<script>
import Upload from "@/components/common/upload.vue";
import validators from "@/utils/rule";
export default {
  components: { Upload },
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      loading: 0,
      value: [],
      fileList: [],
      show: false,
      drawer: false,
      rylxArr: [
        {
          value: "0",
          label: "单位法人",
        },
        {
          value: "1",
          label: "等保测评专家（个人用户）",
        },
        {
          value: "2",
          label: "网红/大V",
        },
        {
          value: "3",
          label: "等保测评专家（单位用户）",
        },
        {
          value: "4",
          label: "省网安用户",
        },
        {
          value: "5",
          label: "市网安用户",
        },
        {
          value: "6",
          label: "区县网安用户",
        },
      ],
      addressArr: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
            },
            {
              value: "yizhi",
              label: "一致",
            },
            {
              value: "fankui",
              label: "反馈",
            },
            {
              value: "xiaolv",
              label: "效率",
            },
            {
              value: "kekong",
              label: "可控",
            },
          ],
        },
      ],
      form_data: {
        rylx: "",
        name: "",
        user: "",
        idNumber: "",
        pass: "",
        phone: "",
        ssdw: "",
        address: "",
        detailedAddress: "",
        imgUrl: "",
      },
      rules: {
        rylx: [{ required: true, message: "请选择人员类型", trigger: "blur" }],
        name: [
          {
            required: true,
            validator: validators.isName,
            trigger: "blur",
          },
        ],
        user: [
          {
            required: true,
            validator: validators.isUser,
            trigger: "blur",
          },
        ],
        idNumber: [
          {
            required: true,
            validator: validators.isIdNumber,
            trigger: "blur",
          },
        ],
        pass: [
          {
            required: true,
            validator: validators.isPassword,
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            validator: validators.isPhone,
            trigger: "blur",
          },
        ],
        ssdw: [{ required: true, message: "请选择所属单位", trigger: "blur" }],
        address: [
          { required: true, message: "请选择居住地址", trigger: "blur" },
        ],
        detailedAddress: [
          { required: true, message: "请选择详细地址", trigger: "blur" },
        ],
        imgUrl:[
          { required: true, message: "请上传身份证", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    isShow() {
      this.drawer = true;
    },
    receiveFile(data) {
      //如果设置了默认图片请注意data返回值
      //data返回值是一个数组，数组中如果设置了默认值data返回的数据会存在对象和文件流两种数据类型
      //如果数据中存在name就是一个文件流，如果没有就是设置的默认值的数据
      console.log("data", data);
    },

    handleChange(value) {
      console.log(value);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },

    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    submit() {
      this.$refs["Form"].validate((valid) => {
        if (valid) {
          console.log(this.$refs.address.getCheckedNodes()[0], "data");
        } else {
          return false;
        }
      });
    },
    close() {
      this.drawer = false;
    },
  },
};
</script>

<style scoped>
.el-select {
  width: 100%;
}
.bock {
  padding: 0px 20px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}
.drawerBtn {
  padding-left: 448px !important;
}
</style>
